<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">box</div>

    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;

        animation: xxx 3s linear;
        animation: xxx 3s steps(3, start) backwards;
      }

      @keyframes xxx {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(300px);
        }
      }
    </style>

    <script>
      document.querySelector(".box").addEventListener("animationend", () => {
        console.log("Animation ended");
      });
    </script>

    <div class="mi"></div>

    <style>
      .mi {
        width: 132px;
        height: 271px;
        background-color: lightblue;
        background-image: url("./mi copy.jpg");
        /* background-repeat: no-repeat; */

        /* animation: yyy 3s linear; */
        animation: yyy 0.5s steps(4) infinite;
        animation-play-state: paused;
      }

      @keyframes yyy {
        0% {
          background-position-x: 132px;
        }
        100% {
          background-position-x: -396px;
        }
      }
    </style>

    <div class="monster"></div>

    <style>
      .monster {
        width: 80px;
        height: 96px;
        background-color: lightblue;
        background-image: url("./monster.png");
        /* background-repeat: no-repeat; */

        /* animation: yyy 3s linear; */
        animation: zzz 0.5s steps(4) infinite;
        /* animation-play-state: paused; */
        background-position-y: -288px;
      }

      @keyframes zzz {
        0% {
          background-position-x: 80px;
        }
        100% {
          background-position-x: -240px;
        }
      }
    </style>

    <!-- https://www.17sucai.com/pins/demo-show?id=37375 -->
    <!-- https://www.17sucai.com/pins/demo-show?id=1027 -->
    <!-- https://www.17sucai.com/pins/demo-show?id=31403 -->


    <!-- 拓展 https://www.17sucai.com/pins/demo-show?id=35028 -->

    <!-- 看看 https://www.17sucai.com/pins/demo-show?id=40905 -->
  </body>
</html>
